<template>
  <div class="bg-white">
    <template v-for="item in list" :key="item.id">
      <div class="p-2">
        <div class="flex flex-row">
          <h6 class="font-semibold leading-5">
            {{ Utils.formatDateTime(item.event_timestamp) }}
          </h6>
          <button
            type="button"
            class="ml-8 inline-block rounded border px-2 py-1 text-sm"
            :class="item.good_or_bad == 1 ? 'border-red-500 text-red-500' : 'border-green-600 text-green-600'"
            @click="Utils.forwordBk(item.plate_abnormal_event_data.plate_id)"
          >
            {{ item.plate_abnormal_event_data.plate_name }}
          </button>
        </div>
        <div>
          <span>{{ item.good_or_bad == 1 ? '板块拉升 ' : '板块跳水 ' }}</span>
          <span class="font-semibold" :class="item.plate_abnormal_event_data.pcp > 0 ? 'text-red-500' : 'text-green-600'">
            {{ (item.plate_abnormal_event_data.pcp * 100).toFixed(2) }} % 。
          </span>
          <template v-for="item1 in item.plate_abnormal_event_data.related_stocks" :key="item1.symbol">
            <span class="cursor-pointer text-blue-600" @click="Utils.forwordGu(item1.symbol)">
              {{ item1.name }}
            </span>
            <span class="font-semibold" :class="item1.pcp > 0 ? 'text-red-500' : 'text-green-600'">{{ (item1.pcp * 100).toFixed(2) }}%</span>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>
<script setup>
import axios from 'axios';
import Utils from '../utils/index';
import { ref } from 'vue';

const list = ref([]);

function fetchData() {
  axios.get('https://flash-api.xuangubao.cn/api/event/history?count=30&types=11000,11001').then(function (res) {
    list.value = res.data.data;
  });
}
defineExpose({
  fetchData,
});
</script>
